<template>
    <div class="pictureorlight">



        <el-col :span="14" class="leftcard">
            <el-row class='leftcardone' :gutter="9">
                <span class="title">测试用例评价参考管理</span>
                <div>
                    <div class="container">
                        <h3>1.测远能力≥(m):</h3><el-input v-model="distance_measuring_capability"></el-input>
                    </div>
                    <div class="container">
                        <h3>2.测近能力≤(m):</h3><el-input v-model="Lateral_approach_capability"></el-input>
                    </div>
                    <div class="container">
                        <h3>3.1 测距精度<(m):</h3><el-input v-model="Ranging_accuracy"></el-input>
                    </div>
                    <div class="container">
                        <h3>3.2 测距准度<(m):</h3><el-input v-model="Range_accuracy"></el-input>
                    </div>
                    <div class="container">
                        <h3>4.1 水平视场角≥(°):</h3><el-input v-model="Horizontal_field_Angle"></el-input>
                    </div>
                    <div class="container">
                        <h3>4.2 垂直视场角≥(°):</h3><el-input v-model="Vertical_field_Angle"></el-input>
                    </div>
                    <div class="container">
                        <h3>5.1 要求水平分辨率(°):</h3><el-input v-model="Horizontal_resolution_required"></el-input>
                    </div>
                    <div class="container">
                        <h3>5.2 要求垂直分辨率(°):</h3><el-input v-model="Vertical_resolution_required"></el-input>
                    </div>
                    <div class="container">
                        <h3>6.1 水平角度准度≤(°):</h3><el-input v-model="Horizontal_Angle_accuracy"></el-input>
                    </div>
                    <div class="container">
                        <h3>6.2 垂直角度准度≤(°):</h3><el-input v-model="Vertical_Angle_accuracy"></el-input>
                    </div>
                    <div class="container">
                        <h3>7.平面度≤(m):</h3><el-input v-model="flatness"></el-input>
                    </div>
                    <el-button type="primary" icon="el-icon-s-tools" @click="PutTestResultEvaluation()">修改</el-button>
                    <!-- <h3>主播地址:<el-input></el-input></h3> -->
                </div>
            </el-row>
        </el-col>
        <el-col :span="10" class="rightlight">

            <div class="light_list">
                <span class="title_name">激光雷达参数管理</span>
                <div class="container_list">
                    <div class="container">
                        <h3>雷达选择:</h3>
                        <el-select>
                            <el-option v-for="stepitem in analyserlist" :key="stepitem.id" :label="stepitem.name"
                            :value="stepitem.id">
                        </el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-s-tools">设置</el-button>
                    </div>

                    <div class="container">
                        <h3>设备IP:</h3><el-input></el-input>
                    </div>
                    <div class="container">
                        <h3>PTC端口:</h3><el-input></el-input>
                    </div>
                    <div class="container">
                        <h3>UDP端口:</h3><el-input></el-input>
                    </div>
                    <div class="container">
                        <h3>主播地址:</h3><el-input></el-input>
                    </div>

                </div>



                <span class="title_name">初始雷达安装位置</span>
                <div class="container_list">
                    <div class="container">
                        <h3>图卡旋转:</h3><el-input v-model="card_rotation"></el-input>
                    </div>
                    <div class="container">
                        <h3>YAW:</h3><el-input v-model="yaw"></el-input>
                    </div>
                    <div class="container">
                        <h3>ROLL:</h3><el-input v-model="roll"></el-input>
                    </div>
                    <div class="container">
                        <h3>PITCH:</h3><el-input v-model="pitch"></el-input>
                    </div>
                    <div class="container">
                        <h3>Z:</h3><el-input v-model="z"></el-input>
                    </div>
                    <el-button type="primary" icon="el-icon-s-tools" @click="updateSettingAngle()">修改</el-button>



                </div>

            </div>

        </el-col>



    </div>
</template>

<script>
// import myIcon from '~@/pages/static/回仓.png';
export default {

    data() {
        return {
            distance_measuring_capability :0,
            Lateral_approach_capability :0,
            Ranging_accuracy :0,
            Range_accuracy :0,
            Horizontal_field_Angle :0,
            Vertical_field_Angle :0,
            Horizontal_resolution_required :0,
            Vertical_resolution_required :0,
            Horizontal_Angle_accuracy :0,
            Vertical_Angle_accuracy :0,
            flatness :0,
            yaw:0,
            roll:0,
            pitch:0,
            z:0,
            card_rotation:0,
        };
    },
    created() {
        this.GetTestResultEvaluation()
        this.GetSettingAngle()
    },
    methods: {
        // 获取初始雷达安装位置
        GetSettingAngle(){
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/SettingAngle/`).then((res) => {
                if (res.data.code == 100) {
                    this.yaw = res.data.data[0]['yaw']
                    this.roll = res.data.data[0]['roll']
                    this.pitch = res.data.data[0]['pitch']
                    this.z = res.data.data[0]['z']
                    this.card_rotation = res.data.data[0]['card_rotation']
                }
            })
        },
        updateSettingAngle(){
            this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/SettingAngle/1/`,{
                'yaw':this.yaw,
                'roll':this.roll,
                'pitch':this.pitch,
                'z':this.z,
                'card_rotation':this.card_rotation
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },
        GetTestResultEvaluation(){
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_task/TestResultEvaluation/`).then((res) => {
                if (res.data.code == 100) {
                    this.distance_measuring_capability = res.data.data[0]['distance_measuring_capability']
                    this.Lateral_approach_capability = res.data.data[0]['Lateral_approach_capability']
                    this.Ranging_accuracy = res.data.data[0]['Ranging_accuracy']
                    this.Horizontal_field_Angle = res.data.data[0]['Horizontal_field_Angle']
                    this.Vertical_field_Angle = res.data.data[0]['Vertical_field_Angle']
                    this.Horizontal_resolution_required = res.data.data[0]['Horizontal_resolution_required']
                    this.Vertical_resolution_required = res.data.data[0]['Vertical_resolution_required']
                    this.Horizontal_Angle_accuracy = res.data.data[0]['Horizontal_Angle_accuracy']
                    this.Vertical_Angle_accuracy = res.data.data[0]['Vertical_Angle_accuracy']
                    this.flatness = res.data.data[0]['flatness']
                }
            })
        },
        PutTestResultEvaluation(){
            this.$axios.patch(this.$settings.BASE_URL_TOF + `tof_task/TestResultEvaluation/1/`,{
                'distance_measuring_capability':this.distance_measuring_capability,
                'Lateral_approach_capability': this.Lateral_approach_capability,
                'Ranging_accuracy':this.Ranging_accuracy,
                'Horizontal_field_Angle':this.Horizontal_field_Angle,
                'Vertical_field_Angle':this.Vertical_field_Angle,
                'Horizontal_resolution_required':this.Horizontal_resolution_required,
                'Vertical_resolution_required':this.Vertical_resolution_required,
                'Horizontal_Angle_accuracy':this.Horizontal_Angle_accuracy,
                'Vertical_Angle_accuracy':this.Vertical_Angle_accuracy,
                'flatness':this.flatness
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },
        cmslocation() {

            this.cmclocation = true
        },
        setupWebSocket() {
            this.websocket = new WebSocket("ws://127.0.0.1:8000/socket/TofChart/"); // 创建WebSocket连接
            this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
            this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
            this.websocket.onclose = this.onWebSocketClose; // WebSocket连接关闭时的处理函数
        },
        onWebSocketOpen() {
            console.log("链接成功");
        },
        onWebSocketMessage(event) {
            var message = event.data;
            var dictionary = JSON.parse(message)
            // console.log('message', dictionary.message.index, dictionary.message.location)
            this.bench_list[dictionary.message.index]['s'] = dictionary.message.location
            // console.log(this.bench_list[dictionary.message.index]['s'])
            // this.bench[dictionary.message.index]['position'] = dictionary.message.location

            // 在这里您可以根据消息的内容执行不同的操作，例如更新界面、触发事件等
        },

        closeWebSocket() {
            if (this.websocket) {
                this.websocket.close(); // 关闭WebSocket连接
            }
        },
        // 设备回零
        SetRailGoHome() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/SetRailGoHome/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },
        AnalyzeData() {
            this.$axios.post(this.$settings.BASE_URL_TOF + `tof_task/${analyserlist[test_name]['label']}/`, {}).then((res) => {
                if (res.data.code == 100) {

                }
            })

        },
        benchmove(name, id) {
            console.log('我移动了', this.bench_list[id]['v'], parseFloat(this.bench_list[id]['position']))
            this.$axios.post(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/MoveAxis/`, {
                'axis': name,
                'velocity': this.bench_list[id]['v'],
                'position': parseFloat(this.bench_list[id]['position'])
            }).then((res) => {
                if (res.data.code == 100) {

                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    // resolve();
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        benchstop(id) {
            this.$axios.post(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/SetSpeedAndPosition/`, {
                'axis': id
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            });
            // });
            // this.sleep(3000)


            //  this.stop_plc()
        },
        getallinform() {
            const cmsControlMainGuideGetCmsMainPosition = 'tof_chart/TOFChartGuide/GetCurrentPosition/';
            console.log(this.$settings.BASE_URL_TOF + cmsControlMainGuideGetCmsMainPosition)
            this.$axios.get(this.$settings.BASE_URL_TOF + cmsControlMainGuideGetCmsMainPosition).then((res) => {
                if (res.data.code == 100) {
                    this.bench_list = res.data.data;
                }
                // alert(this.bench[0]['p'])
                else {
                    this.$notify.error({ title: res.data.msg });
                }
                // alert(this.bench[0]['p'])
            })
        },
        Getbench() {
            // this.loading_DeviceReset = true
            this.$axios.get(this.$settings.BASE_URL_TOF + 'tof_chart/is_guide/'
            ).then((res) => {
                if (res.data.code == 100) {
                    console.log(res.data.data)
                    this.benchlist = res.data.data
                }
            })
        },
        setActive(index) {
            this.activeIndex = index;
        },
        // 获取当前图卡
        get_at_present_card() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/GetCurrentImageCardId/`).then((res) => {
                console.log('GetCardCurrent',)
                if (res.data.code == 100) {
                    console.log(res.data.data)
                    this.clickedIndex = res.data.data - 1
                } else {
                    this.$message.error(res.data.msg);
                }
            })

        },

        update_card() {
            console.log('update_card')
            this.$axios.put(this.$settings.BASE_URL_TOF + `tof_chart/ListCard/${this.card_one.id}/`, {
                'card_name': this.card_one.pictrue_name,
                'card_slot': this.card_one.sort,
                'image': this.card_one.picture_url,
            }).then((res) => {
                if (res.data.code == 100) {
                    this.GetCard()
                    this.is_update_card = false
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        },
        GetCardOne(all) {
            this.card_one.id = all.id
            this.card_one.pictrue_name = all.card_name
            this.card_one.sort = all.card_slot
            this.card_one.picture_url = all.image
            this.is_update_card = true

        },
        handleClose_is_lightcreate(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        handleClose_is_update_card(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        // 获取当前图卡
        GetCard() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_chart/ListCard`).then((res) => {
                if (res.data.code == 100) {
                    console.log('------', res.data.data)
                    this.card_all = res.data.data
                    console.log(this.card_all, '---')
                    // this.get_at_present_card()
                }
                else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        // 开灯
        light_start() {
            if (this.start_light_id == 5) {
                this.$axios.post(this.$settings.BASE_URL_CMS + `JiaLiang_Light/qclight/OpenLight/`, { 'brightness': this.start_light_lux, 'sec_name': this.start_light_cct }).then((res) => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            } else {
                this.$axios.post(this.$settings.BASE_URL_CMS + `JiaLiang_Light/ccxllight/OpenLight/`, { 'brightness': this.start_light_lux, 'sec_name': this.start_light_cct, 'light_id': this.start_light_id }).then((res) => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }



        },
        // // 连接光源
        // LightInit() {
        //     this.$axios.get(this.$settings.BASE_URL_CMS + `lightauto/lightinit/`).then((res) => {
        //         if (res.data.code == 100) {
        //             this.lightcode = res.data.msg
        //         } else {
        //             this.lightcode = res.data.msg
        //         }
        //     })
        // },
        // // 断开连接
        // LightBreak() {
        //     this.$axios.get(this.$settings.BASE_URL_CMS + `lightauto/lightbreak/`).then((res) => {
        //         if (res.data.code == 100) {
        //             this.lightcode = res.data.msg
        //         } else {
        //             this.lightcode = res.data.msg
        //         }
        //     })
        // },
        // 关灯
        light_stop() {
            if (this.start_light_id == 5) {
                this.$axios.get(this.$settings.BASE_URL_CMS + `JiaLiang_Light/qclight/OFFLight/`).then((res) => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            } else {
                this.$axios.get(this.$settings.BASE_URL_CMS + `JiaLiang_Light/ccxllight/OFFLight/`).then((res) => {
                    if (res.data.code == 100) {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })

            }
        },
        // 获取com口
        get_com() {
            this.$axios.get(this.$settings.BASE_URL_CMS + `Ccxl/opencom/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.data,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        // 添加太阳点光源
        Create_Sun_light() {
            this.$axios.post(this.$settings.BASE_URL_CMS + `PL1C05/PL1C05List/`, {
                'PL1C05_username': this.start_light.username,
                'PL1C05_lux': parseInt(this.start_light.lux),
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.is_lightcreate = false
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        // 添加天空散射光源
        Create_Sky_light() {
            this.$axios.post(this.$settings.BASE_URL_CMS + `Ccxl/SkyLightList/`, {
                'sky_username': this.start_light.username,
                'sky_lux': parseInt(this.start_light.lux),
                'sky_cct': parseInt(this.start_light.cct),
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.is_lightcreate = false
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        Create_light() {
            this.$axios.post(this.$settings.BASE_URL_CMS + `Ccxl/LightList/`, {
                'username': this.start_light.username,
                'lux': parseInt(this.start_light.lux),
                'cct': parseInt(this.start_light.cct),
            }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.is_lightcreate = false
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(res.data.msg)
        },
        // 切换图卡
        SwitchImage(id) {
            this.clickedIndex = id - 1; // 更新点击的项目索引
            this.$axios.post(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/SwitchImageCard/`, { 'card_id': id }).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.data.msg);
                }
            })
        },
        GoHomeImage() {
            this.$axios.get(this.$settings.BASE_URL_TOF + `tof_chart/TOFChartGuide/SetImageCardGoHome/`).then((res) => {
                if (res.data.code == 100) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }
            })
        }
    }
}
</script>

<style lang="less">
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* 确保容器高度为视口高度 */
    margin: 0;
    background-color: #f0f0f0;
    /* 可选背景色 */
}

// h3 {
//     float: left;
//     margin: @h*10vh @w *15vw;
//     width: @w *100vw;

// }


.el-dialog__body {
    height: @h*500vh
}

.center-image {
    max-width: 100%;
    height: auto;
}

.stop {
    color: red;
}

.el-message-box {
    background-color: #161D26;
    border: #1F2935;
}

.el-dialog {
    background-color: #1F2935;

    .el-form-item__content .el-radio {
        margin-left: @w *15vw;
        // margin-right: @w *15vw;
    }

}

// .el-input-number__decrease{
//     float: left;
// }

.bench-box {
    width: @w * 380vw;
    float: left;
    height: @h*256vh;

    background: #1f2935;
    margin: @h*30vh 0 0 @w * 10vw;
    border-radius: 0px 0px 0px 0px;

    .post_position {
        height: @h*60vh;
        margin: @h*10vh 0;
        width: @w * 380vw;
        float: left;


    }

    .post_position_input {
        float: left;
        width: @w * 170vw;
        margin-left: @w * 20vw;
        height: @h*70vh;

        .el-input {
            float: left;
            width: @w * 165vw !important;
            height: @h*40vh;

            .el-input__inner {
                height: @h*40vh;
                padding: 0;
                font-size: @h*12vh;
                background: #161d26;
                width: @w * 160vw;
                margin: 0;
                text-align: center;
                border: none;
                color: #fff;
                display: inline-block;
            }
        }

        .setting_title {
            float: left;
            width: @w * 160vw;
            height: @h*30vh;
            line-height: @h*30vh;
        }
    }

    .move_title {
        width: @w * 200vw;
        margin-left: @w * 20vw;
        height: @h*50vh;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: @h*22vh;
        font-weight: 700;
        letter-spacing: @w * 1vw;
        color: #ffffff;
        line-height: @h*50vh;
        text-align: left;
        font-style: normal;
        text-transform: none;
        float: left;
    }

    .post_button {
        height: @h*47vh;
        width: @w * 380vw;
        display: flex;
        // float: left;
        justify-content: center;
        align-items: center;

        .el-button {
            float: left;
            margin: 0 @w * 20vw;
        }
    }

    .now_position {
        width: @w * 120vw;
        margin: 0 @w * 10vw;
        height: @h*50vh;
        line-height: @h*55vh;
        color: #00b42a;
        font-size: @h*30vh;
        float: left;

        .el-input__suffix {
            float: left;
            color: #00b42a;
            line-height: @h*70vh;
            margin-left: auto;
        }

        .el-input__inner {
            padding: 0;
            margin: 0;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            font-size: @h*30vh;
            color: #00b42a;
            // line-height: @h*20vh;
            text-align: left;
            font-style: normal;
            text-transform: none;
            float: left;
            background: none;
            border: none;
            display: flex;
            align-items: center;
            width: fit-content;
        }
    }
}

.el-radio__label {
    color: #fff;
}

.el-dialog__title {
    color: #fff;
}

.el-form-item__content {
    display: flex;

    .el-radio {
        margin-top: @h*15vh;
        margin-left: @w *20vw;
    }

    .el-form-item__label {
        width: @w *115vw;
    }

    .el-input {


        // padding: 0;
        .el-input__inner {
            background-color: #161D26;
            border: none;
            color: #fff;


        }


    }
}

.pictureorlight {
    width: 100%;
    float: left;

    .el-input-number__increase {
        right: 23px;
    }

    .leftcard {

        .bench-box {
            width: @w * 535vw;
            height: @h*200vh;
        }

        .post_position {
            height: @h*70vh;
            margin: @h*10vh 0;
            width: @w * 535vw;
            float: left;


        }

        .post_button {
            height: @h*60vh;
            line-height: @h*60vh;
        }

        .step {
            // width: @w * 110vw;
            // height: @h*40vh;
            // margin-left: @w * 25vw;
            // line-height: @h*40vh;
            margin: @h*20vh 0;
            line-height: @h*38vh;
            width: @w * 186vw;

            .el-input-number__decrease,
            .el-input-number__increase {
                top: 1px;
                height: @h*38vh;
                width: @w * 78vw;
                background-color: #161D26;
                border: 1px solid #0081FF;
                color: #0081FF
            }

            .el-input-number__decrease:active,
            .el-input-number__increase:active {
                background-color: #0081FF;
                /* 按下时背景色变为黑色 */
                color: #fff;
                /* 按下时字体颜色变为白色 */
            }

        }

        .post_position_input {
            float: left;
            width: @w * 155vw;
            margin-left: @w * 20vw;
            height: @h*80vh;

            .el-input {
                float: left;
                width: @w * 165vw !important;
                height: @h*40vh;

                .el-input__inner {
                    height: @h*40vh;
                    padding: 0;
                    font-size: @h*12vh;
                    background: #161d26;
                    width: @w * 160vw;
                    margin: 0;
                    text-align: center;
                    border: none;
                    color: #fff;
                }
            }

            .setting_title {
                float: left;
                width: @w * 160vw;
                height: @h*30vh;
                line-height: @h*30vh;
            }
        }

        .el-input-number__decrease,
        .el-input-number__increase {
            top: 5px;
            height: @h*38vh;
        }

        .light_list {

            width: 100%;
            margin: 0 @w*20vw;
        }

        .title_name {
            width: 100%;
            float: left;
            height: @h*70vh;
            line-height: @h*90vh;
            font-size: @h*30vh;
            margin: 0 @w*20vw;
        }

        .foot {
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            // float: left;
            height: @h*60vh;
            width: @w *1255vw;
            background-color: #1F2935;
            position: absolute;
            bottom: 0;
            left: @w *240vw;

            .my_class {
                float: right;
                height: @h*40vh;
                width: auto;
                padding: 0 @w *10vw;
                background-color: #161D26;
                margin: 0 0 0 @w *10vw;
                border: 0;
                color: #fff;
            }

            .my_class_primary {
                float: right;
                height: @h*40vh;
                width: auto;
                padding: 0 @w *10vw;
                background-color: #0081FF;
                margin: 0 0 0 @w *10vw;
                color: #fff;
                border: 0;
            }
        }

        background-color: #161D26;
        height: 100%;
        // overflow: auto;

        .leftcardthree {
            .body {
                .body_left {
                    float: left;
                    width: @w*240vw;

                    .caret-right {
                        margin: @h*20vh 0 0 @w*70vw;
                        width: @w*100vw;
                        height: @h*100vh;

                    }

                    .capture {
                        width: @w*240vw;
                        text-align: center;
                        height: @h*70vh;
                        line-height: @h*70vh;
                        font-size: @h*25vh;
                    }
                }

                .body_center {
                    width: @w*290vw;
                    float: left;
                    margin: 0 0 0 @w *10vw;

                    .title {
                        float: left;
                        width: @w*180vw;
                        // text-align: center;
                        // font-size: @h*20vh;
                        // width: @w * 200vw;
                        margin-left: @w * 20vw;
                        font-size: @h*22vh;
                        font-weight: 700;
                        letter-spacing: @w * 1vw;
                        color: #ffffff;

                    }

                    img {
                        width: @w*250vw;
                        height: @h*185vh;
                        float: left;
                        margin: @h*20vh @w*20vw;
                    }
                }

                .body_right {
                    float: left;
                    width: @w*805vw;
                    height: @h*400vh;
                    // text-align: center;

                    .el-input {
                        // float: right;
                        background: #161d26;
                        width: @w*105vw;
                        margin: @h*20vh @w*10vw;


                        .el-input__inner {
                            height: @h*20vh;
                            padding: @h*5vh @w*10vw;
                            font-size: 1.31111111vh;
                            background: #161d26;
                            width: @w*105vw;
                            margin: 0;
                            text-align: center;
                            border: none;
                            color: green;
                            font-weight: bold;
                        }
                    }

                    .setting_edit {
                        float: right;
                        padding: @h*5vh @w*10vw;
                        margin: @h*15vh @w*10vw 0 0;
                        width: @w*120vw;
                        font-size: @h*15vh;
                    }

                    .parent-class {
                        text-align: center;
                        color: green
                    }




                    .el-table {
                        width: @w*800vw;
                        // margin: @h*10vh 0vw;
                        height: @h*200vh;
                        float: left;
                    }

                    .my-black-table {
                        width: @w*800vw;
                        // margin: @h*10vh 0vw;
                        height: @h*200vh;
                        float: left;
                        background-color: #161d26;
                        color: #ffffff;
                    }

                    .my-black-table th {
                        text-align: center;
                        background-color: #161d26;
                        color: #ffffff;
                    }

                    .my-black-table td {
                        background-color: #161d26;
                        color: #ffffff;
                    }

                    .title {
                        float: left;
                        width: @w*100vw;
                        // text-align: center;
                        font-size: @h*18vh;
                        // margin: @h*-15vh @w*10vw 0 0;
                        margin-left: @w * 20vw;
                        font-size: @h*22vh;
                        font-weight: 700;
                        letter-spacing: @w * 1vw;
                        color: #ffffff;


                    }

                    .setting_edit_clear {
                        float: right;
                        padding: @h*5vh @w*10vw;
                        margin: @h*15vh @w*10vw 0 0;
                        width: @w*120vw;
                        font-size: @h*15vh;
                        color-scheme: red
                    }
                }

            }

            .title {
                width: @w*120vw;
                height: @h*70vh;
                //font-weight: 700;
                font-size: @h*30vh;
                color: #FFFFFF;
                line-height: @h*90vh;
                text-align: left;
                margin: @h*-15vh @w*20vw;
                // margin-left: @w*40vw;

                .el-button {
                    float: right;
                    margin: @h*20vh @w*20vw;
                }
            }
        }

        .leftcardone {
            .container {
                display: flex;
            }

            .el-input__inner {
                height: @h*40vh;
                padding: 0;
                font-size: @h*12vh;
                background: #161d26;
                width: @w * 500vw;
                margin: 0;
                text-align: center;
                border: none;
                color: #fff;
                border: 2px solid #ccc;
            }

            h3 {
                width: @w*400vw;
                font-size: @h*22vh;
                margin-left: @w*40vw;
                margin-top: @h*10vh ;
                /* 设置上外边距为10px，可按需调整 */
                margin-bottom: @h*10vh ;
                // margin-right:10px;
                // display:inline - block;
                // .el-input {
                //     display: inline - block;
                // }

            }

            .title {
                width: @w*120vw;
                height: @h*70vh;
                //font-weight: 700;
                font-size: @h*30vh;
                color: #FFFFFF;
                line-height: @h*90vh;
                text-align: left;

                margin-left: @w*40vw;

                .el-button {
                    float: right;
                    margin: @h*20vh @w*20vw;
                }

                .setting_edit_clear {

                    // left: 50%;  
                    padding: @h*5vh @w*10vw;
                    margin: @h*15vh @w*10vw 0 0;
                    width: @w*120vw;
                }
            }

        }

        .leftcardtwo {
            border-bottom: 1px solid #8291A9;
            padding-bottom: @h*20vh;
            width: @w*1123vw;
        }

        .overflow-x-hidden {
            overflow-x: hidden !important;
        }

        .cardall {
            padding: 0 0 0 @w*20vw;
            //height: 83%;
            overflow: hidden;
            width: @w*1100vw;
            ;

            .active {
                border: 1px solid #0081FF !important;

                .card_title {
                    background-color: #0081FF !important;
                }
            }

            .cardchoose {
                border: 1px solid #00B42A !important;

                .card_title {
                    background-color: #00B42A !important;
                }
            }

            .card_list {
                width: @w*159vw;
                height: @h*160vh;
                margin: @h*10vh 0 @h*20vh @w*20vw;
                background: #1F2935;
                float: left;
                // display: inline-block;
                border: 1px solid #1F2935;

                .el-badge {
                    left: @w*-10vw;
                    top: @h*-170vh;
                }

                .card_img {
                    height: @h*120vh;

                    display: relative;

                }

                .icon_number {
                    position: relative;
                    color: red;
                    top: 5%;
                    /* 图标置于容器垂直中心 */
                    left: 5%
                }

                .image {
                    // height: @h*180vh;
                    width: @w*160vw;
                    height: @h*120vh;

                }

                .card_title {
                    width: @w*160vw;
                    height: @h*40vh;
                    // line-height: @h*50vh;
                    font-size: @h*20vh;
                    color: #fff;
                    letter-spacing: @h*1vh;
                    // margin-top: 0 !important;
                    line-height: @h*40vh;
                    text-align: center;
                    float: left;
                    background: rgba(130, 145, 169, 0.1);
                }
            }
        }
    }

    .rightlight {

        .body_left {
            float: left;
            width: @w*400vw;
            height: @h*200vh;

            .caret-right {
                margin: @h*70vh 0 0 @w*130vw;
                width: @w*100vw;
                height: @h*100vh;

                .el-icon-caret-right {
                    font-size: @h*50vh;
                }
            }

            .capture {
                width: @w*360vw;
                text-align: center;
                height: @h*100vh;
                line-height: @h*100vh;
                font-size: @h*25vh;
            }
        }

        .bench-box {
            // border: 1px solid #8291A9;
        }

        img {
            float: right;
            margin: @h*15vh @w * 80vw 0 0;
            width: @w * 300vw;
            height: @h*300vh
        }

        .post_position_inputs {
            width: @w * 340vw;
            float: left;
            margin-left: @w * 20vw;
            height: @h*70vh;
        }

        .setting_titles {
            float: left;
            // width: @w * 160vw;
            height: @h*40vh;
            line-height: @h*40vh;
        }

        .number_left {
            float: left;
            width: @w * 110vw;
            height: @h*40vh;
            margin-left: @w * 25vw;
            line-height: @h*40vh;
            color: #0081FF;

            .el-input__inner {
                height: @h*40vh;
                padding: 0;
                font-size: @h*12vh;
                background: #161d26;
                width: @w * 120vw;
                margin: 0;
                text-align: center;
                border: none;
                color: #fff;
            }
        }

        .el-input-number__increase {
            right: -7px;
        }

        .el-input-number__decrease,
        .el-input-number__increase {
            top: 1px;
            height: @h*38vh;
            width: @w*58vw;
            background-color: #161D26;
            border: 1px solid #0081FF;
            color: #0081FF
        }

        .el-input-number__decrease:active,
        .el-input-number__increase:active {
            background-color: #0081FF;
            /* 按下时背景色变为黑色 */
            color: #fff;
            /* 按下时字体颜色变为白色 */
        }

        background-color: #161D26;
        height: 93%;
        border-left: 1px solid #8291A9;
        overflow-x: hidden;
        overflow-y: auto;

        .title_name {
            width: 100%;
            height: @h*70vh;
            //font-weight: 700;
            font-size: @h*30vh;
            color: #FFFFFF;
            line-height: @h*90vh;
            text-align: left;
            float: left;
            margin-left: @w*40vw;

        }
        .el-select{
            float: left;
        }

        .light_list {
            .container_list{
                 width: @w*800vw;
                 height:@h*300vh ;
                 float: left;
                 .container {
                // display: flex;
                float: left;
                // width: @w*7%;
                height:@h*60vh ;
                line-height: @h*60vh ;
                margin-left: @w*30vw;
            }
            }
           

            // width: 100%;
            // margin: 0 @w*20vw;

            h3 {
                width: @w*130vw;
                font-size: @h*22vh;
                // display: inline-block;
                float: left;
                // margin-top: @h*10vh ;
                /* 设置上外边距为10px，可按需调整 */
                // margin-bottom: @h*10vh ;


            }
            .el-input__icon{
                line-height:  @h*50vh ;
            }
            .el-input {
                float: left;
                margin-top: @h*10vh ;
                // line-height:  @h*50vh ;
                width: @w*400vw;
            }



            .span_light {
                width: 100%;
                float: left;
                height: @h*30vh;
                line-height: @h*30vh;
                font-size: @h*16vh;
                margin: @h*10vh @w*20vw;
            }

            .span_list {
                float: left;
                margin: @h*10vh @w*20vw;
                width: 100%;

                .span_tite {
                    width: @w*450vw;
                    margin: @h*20vh 0 @h*10vh;
                    float: left;
                    font-size: @h*25vh;
                    color: #fff;
                    // height: @h*50vh;


                }

                span {
                    width: @w*450vw;
                    margin-top: @h*10vh ;
                    float: left;
                    font-size: @h*20vh;
                    color: #8291A9;

                }
            }

            .button_list {
                float: left;


                margin: @h*10vh @w*20vw;

                .el-button {
                    height: @h*50vh;
                    line-height: @h*50vh;
                    margin: @h*10vh;

                    width: @w*160vw;
                    padding: 0 @w*15vw;
                }
            }

            .radio_class {
                width: 100%;
                float: left;
                height: @h*50vh;
                margin: @h*10vh 0 0 @w*20vw;

                .el-radio {
                    margin-right: @w*15vw;
                }
            }
            .el-button{
                padding:0;
                width: @w*120vw;
                margin: @h*12vh 0 0 @w*20vw;
                float: left;
            }
            input {
                width: @w*400vw;
                float: left;
                height: @h*40vh;
                background-color: #161D26;
                // margin: 0 0 @h*10vh @w*20vw;
                color: #fff;
                padding-left: @w*15vw;

            }
        }
    }
}
</style>
